---
title: Lista vertical
description: Guía para usar Fluid DnD con una sola lista vertical.
---

import SingleVerticalList from "@/components/svelte/SingleVerticalList.svelte";
import { Code } from "@astrojs/starlight/components";

### Ejemplo de lista de número

Para mostrar como usar **Fluid DnD** para ordenar una simple lista.
Primero, vamos a crear una lista de números:

export const listOfNumbers = `<script setup lang="ts">
import { useDragAndDrop } from "fluid-dnd/svelte";

const list = state([1, 2, 3]);
const [ parent ] = useDragAndDrop(list);

</script>`;

<Code code={listOfNumbers} lang="svelte" />

Después, crear las lista de números en la vista:

export const listOfNumbersHTML = `
<ul class="number-list">
    {#each list as element, index (element)}
        <li  class="number">
            {element}
        </li>
    {/each}
</ul>
<style>
  .number {
    border-style: solid;
    padding-left: 5px;
    margin-top: 0.25rem;
    border-width: 2px;
  }
  .number-list {
    display: block;
    padding: 10px;
  }
</style>
`;

<Code code={listOfNumbersHTML} lang="svelte" />

:::caution
Evita confirar la propiedad `transform` o las propiedades de `transition` entre diferentes valores de `transform` a los elementos **draggable** debido a que **Fluid DnD** cambia estas propiedades automáticamente.
:::

### Añadiendo referencia al elemento padre

Primero, añademos el _action_ `parent`creado de `useDragAndDrop`:

export const highlightsDroppable = ["droppable-id", "direction", "items"];

export const listOfNumbersDroppable = `
<template>
  <ul ref="parent" class="number-list">
      <li class="number">{{ element }}</li>
   </ul>
</template>
`;

<Code code={listOfNumbersDroppable} lang="svelte" mark={highlightsDroppable} />

### Añadiendo referencia a los elementos hijos

Por cada elemento `<li>` solo pasaremos el **atributo** `data-index` para saber su posición actual y seleccionamos `(element)` como valor único representativo de cada element `li`:

export const listOfNumbersDraggable = `
<ul use:parent class="number-list">
    {#each list as element, index (element)}
        <li class="number" data-index={index}>
            {element}
        </li>
    {/each}
</ul>`;

export const highlightsDraggable = ['data-index={index}','(element)'];

<Code code={listOfNumbersDraggable} lang="svelte" mark={highlightsDraggable} />

### Resultado

<div class="pl-8">
  <SingleVerticalList client:load />
</div>
